<template>
    <div class="analyContent" :style="[{backgroundColor:item.color}]">
        <div class="itemTitle">{{item.name}}</div>
        <div class="itemContent">
            <div class="itemNum">
                <div class="itemNumer">{{item.num}}</div>
                <div class="itemNumDan"><span>单位</span><span class="danwei">{{item.danwei}}</span></div>
            </div>
            <div class="itemIcon">
                <img style="width: 130px; height: 90px" v-if="item.icon == 'zhu'" src="../../../assets/img/echart-zhu.svg" />
                <img style="width: 130px; height: 90px" v-else src="../../../assets/img/echart-zhe.svg" />
            </div>
        </div>
    </div>

</template>
<script setup>
import { ElDialog, ElMessage } from "element-plus";
import { computed, ref, reactive, onMounted } from "vue";
const props = defineProps(["obj"]);
const item = ref(
    props.obj
);
</script>


<style scoped>
.danwei {
    padding-left: 20px;
    color: red;
}
.analyContent {
    width: 280px;
    background-color: #eff7fe;
    padding: 20px 0px 10px 20px;
    margin: 10px;
}

.analyContent {
}

.itemTitle {
    /* margin-bottom: 10px; */
}
.itemContent {
    display: flex;
    justify-content: center;
}
.itemNum {
    display: inline-block;
    width: 110px;
}
.itemNumer {
    margin-bottom: 5px;
    margin-top: 20px;
    font-size: 21px;
}
.itemNumDan {
}
.itemIcon {
    display: inline-block;
}
</style>